<script setup lang="tsx">
import { computed, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { inspectionMap, inspectionAudio } from '@/api/inspection/resource-manage'
import useCRUD from '@/composables/useCRUD'
import CreateMapDialog from './CreateMapDialog.vue'
import CreateAudioDialog from './CreateAudioDialog.vue'
import MyFormDialog from '@/components/MyFormDialog.vue'
import MyTable from '@/components/MyTable.vue'
import MainContainer from '@/components/MainContainer.vue'

interface MapItem {
  id: number
  name: string
  url: string
  createTime: string
}

interface AudioItem {
  id: number
  name: string
  url: string
  createTime: string
}

interface Column {
  label: string
  prop: string
  width?: number
  customRender?: any
}

interface CrudOptions {
  queryApi: () => Promise<any>
  updateApi?: (data: any) => Promise<any>
  deleteApi?: (id: number) => Promise<any>
  newParams: Record<string, any>
}

// 地图列表
const mapColumns: Column[] = [
  { label: '编号', prop: 'id', width: 120 },
  { label: '地图名称', prop: 'name' },
  {
    label: '地图文件',
    prop: 'url',
    customRender(row) {
      return <el-image class=" w-full h-20" fit="cover" src={row.url} />
    }
  },
  { label: '创建时间', prop: 'createTime', width: 200 },
  {
    label: '操作',
    prop: 'action',
    width: 200,
    customRender(row) {
      return (
        <div>
          <el-button
            text
            bg
            type="primary"
            onClick={() => {
              openUpdateMapOrAudioDialog(row)
            }}
          >
            编辑
          </el-button>
          <el-button
            text
            bg
            type="danger"
            onClick={() => {
              deleteMapOrAudio(row.id)
            }}
          >
            删除
          </el-button>
        </div>
      )
    }
  }
]

// 音频列表
const audioColumns: Column[] = [
  { label: '编号', prop: 'id', width: 120 },
  { label: '音频名称', prop: 'name' },
  {
    label: '音频文件',
    prop: 'url',
    customRender(row) {
      return <audio class="h-9 w-full" src={row.url} controls />
    }
  },
  { label: '创建时间', prop: 'createTime', width: 200 },
  {
    label: '操作',
    prop: 'action',
    width: 200,
    customRender(row) {
      return (
        <div>
          <el-button
            text
            bg
            type="primary"
            onClick={() => {
              openUpdateMapOrAudioDialog(row)
            }}
          >
            编辑
          </el-button>
          <el-button
            text
            bg
            type="danger"
            onClick={() => {
              deleteMapOrAudio(row.id)
            }}
          >
            删除
          </el-button>
        </div>
      )
    }
  }
]

// 当前选中类型
const activeType = ref<string>('map')
const columns = computed(() => {
  return activeType.value === 'map' ? mapColumns : audioColumns
})
function switchType(type: string): void {
  if (type === 'map') {
    crudOptions.queryApi = inspectionMap.read
    handleQuery()
  } else {
    crudOptions.queryApi = inspectionAudio.read
    handleQuery()
  }
}

// curd配置
const crudOptions: CrudOptions = {
  queryApi: inspectionMap.read,
  updateApi: inspectionMap.update,
  deleteApi: inspectionMap.delete,
  newParams: {}
}
const {
  params,
  list,
  loading,
  total,
  dialogVisible,
  formData,
  handleQuery,
  handleDelete,
  handleConfirm
} = useCRUD(crudOptions)

// 创建地图/音频弹窗
const createMapDialogVisible = ref(false)
const createAudioDialogVisible = ref(false)
function openCreateMapOrAudioDialog(type: 'map' | 'audio'): void {
  if (type === 'map') {
    createMapDialogVisible.value = true
  } else {
    createAudioDialogVisible.value = true
  }
}

// 获取地图/音频
handleQuery()

// 修改地图/音频
const formOptions = [
  {
    prop: 'name',
    label: '地图名称',
    rules: { required: true, message: '该选项不能为空', trigger: 'blur' },
    customRender() {
      return <el-input />
    }
  }
]
function openUpdateMapOrAudioDialog(row: MapItem | AudioItem): void {
  if (activeType.value === 'map') {
    crudOptions.updateApi = inspectionMap.update
    formOptions[0].label = '地图名称'
  } else {
    crudOptions.updateApi = inspectionAudio.update
    formOptions[0].label = '音频名称'
  }
  formData.value = Object.assign({}, row)
  dialogVisible.value = true
}

// 删除地图/音频
async function deleteMapOrAudio(id: number): Promise<void> {
  await ElMessageBox.confirm('确认继续操作吗', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  if (activeType.value === 'map') {
    crudOptions.deleteApi = inspectionMap.delete
  } else {
    crudOptions.deleteApi = inspectionAudio.delete
  }
  const { message } = await handleDelete(id)
  ElMessage({ type: 'success', message })
}
</script>

<template>
  <MainContainer class="p-5">
    <el-switch
      v-model="activeType"
      size="large"
      active-text="安保音频"
      inactive-text="安保地图"
      active-value="audio"
      inactive-value="map"
      @change="switchType(activeType)"
    />

    <el-button type="primary" class="ml-4" @click="openCreateMapOrAudioDialog(activeType)">
      新增
    </el-button>

    <MyTable v-loading="loading" class="my-4" :data="list" :columns="columns"></MyTable>

    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />

    <CreateMapDialog
      v-model:visible="createMapDialogVisible"
      @handle-query="handleQuery"
    ></CreateMapDialog>

    <CreateAudioDialog
      v-model:visible="createAudioDialogVisible"
      @handle-query="handleQuery"
    ></CreateAudioDialog>

    <MyFormDialog
      v-model:visible="dialogVisible"
      v-model:formData="formData"
      title="编辑"
      :options="formOptions"
      :loading="loading"
      @confirm="handleConfirm"
    ></MyFormDialog>
  </MainContainer>
</template>
